@extends('layouts.app')

@section('content')
    <div class="panel panel-default">
        <div class="panel-heading">用户列表</div>
        <div class="panel-body">
            <el-row>
                <el-button type="danger" icon="el-icon-plus" size="medium" plain @click="dialogVisible = true">添加用户</el-button>
            </el-row>
            <el-table
                    v-loading="loading"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading"
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="ID"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="账号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="邮箱">
                </el-table-column>
                <el-table-column
                        prop="role_name"
                        label="角色">
                </el-table-column>
                <el-table-column
                        prop="created_at"
                        label="添加时间">
                </el-table-column>
                <el-table-column
                        prop="is_disable_label"
                        label="状态">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    layout="total,prev, pager, next"
                    :page-size="15"
                    :total="total">
            </el-pagination>
        </div>
    </div>
    <el-dialog
            :title="dialogTitle"
            :visible.sync="dialogVisible" @open="dialogOpen"
            width="30%" @close="dialogClose">
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
            <el-form-item label="用户名" prop="name">
                <el-input v-model="form.name" placeholder="请输入登录账号"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="form.email" placeholder="请输入用户邮箱"></el-input>
            </el-form-item>
            <el-form-item label="禁用" v-if="form.id">
                <el-radio-group v-model="form.is_disable">
                    <el-radio :label="0">否</el-radio>
                    <el-radio :label="1">是</el-radio>
                </el-radio-group>
            </el-form-item>
            <template v-if="form.id === 0">
                <el-form-item label="密码"  prop="password">
                    <el-input v-model="form.password" placeholder="请输入登录密码"></el-input>
                </el-form-item>
            </template>
            <template v-else>
                <el-form-item label="密码">
                    <el-input v-model="form.password" placeholder="不输入不修改密码"></el-input>
                </el-form-item>
            </template>
            <el-form-item label="所属角色" prop="role_id">
                <el-select v-model="form.role_id" placeholder="请选择角色">
                    <el-option v-for="item in roleData" :label="item.display_name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">关 闭</el-button>
            <el-button type="primary" @click="onSubmit('form')">确 定</el-button>
          </span>
    </el-dialog>
@endsection

@section('js')
    <script>
        const app = new Vue({
            el: '#app',
            data() {
                return {
                    tableData: [],
                    page: 1,
                    total: 0,
                    loading: true,
                    dialogVisible: false,
                    roleData: [],
                    form: {
                        id: 0,
                        name: '',
                        email: '',
                        is_disable: 0,
                        role_id: '',
                        password: ''
                    },
                    rules: {
                        name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                        email: [{ required: true, message: '请输入用户邮箱地址', trigger: 'blur' }],
                        role_id: [{ required: true, message: '请选择所属角色', trigger: 'change' }],
                        password: [
                            { required: true, message: '请输入用户密码', trigger: 'blur' },
                            { min: 6, message: '长度必须大于6位', trigger: 'blur' }
                        ]
                    }
                }
            },
            mounted: function () {
                this.getData()
            },
            methods: {
                dialogOpen () {
                    const me = this;
                    axios.post("{{route('freeGetRole')}}",{})
                        .then(function (res) {
                            console.log(res);
                            if (res.data.r === 1000){
                                me.roleData = res.data.i;
                            }
                        }).catch(function (err) { console.log('err',err) })
                },
                dialogClose () {
                    this.form = {id: 0, name: '', email: '', is_del: 0, password: ''};
                    this.$refs['form'].clearValidate();
                },
                handleEdit(index, row) {
                    this.form = row;
                    this.dialogVisible = true;
                },
                handleDelete(index, row) {
                    const me = this;
                    this.$confirm('确认要永久删除这个用户?','操作提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.post("{{action('UserController@delUser')}}",{id: row.id})
                            .then(function (res) {
                                console.log(res);
                                me.$message({message: res.data.i, type: res.data.status});
                                if (res.data.r === 1000){
                                    me.getData()
                                }
                            }).catch(function (err) {
                            console.log(err)
                        });
                    }).catch(() => {});
                },
                onSubmit(formName) {
                    const me = this;
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            if (this.form.id) {
                                axios.post("{{action('UserController@editUser')}}", {form: this.form})
                                    .then(function (res) {
                                        me.$message({
                                            message: res.data.i,
                                            type: res.data.status
                                        });
                                        if (res.data.r === 1000) {
                                            me.getData();
                                            me.dialogVisible = false
                                        }
                                    })
                                    .catch(function (error) {
                                        console.log('error result', error);
                                    })
                            }else{
                                axios.post("{{action('UserController@addUser')}}", {form: this.form})
                                    .then(function (res) {
                                        me.$message({
                                            message: res.data.i,
                                            type: res.data.status
                                        });
                                        if (res.data.r === 1000) {
                                            me.getData()
                                        }
                                    })
                                    .catch(function (error) {
                                        console.log('error result', error);
                                    })
                            }
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });

                },
                getData: function () {
                    const me = this;
                    axios.post("{{action('UserController@index')}}",{page:this.page})
                        .then(function (res) {
                            if (res.data.r === 1000){
                                me.total = res.data.i.total;
                                me.tableData = res.data.i.data
                            }
                            me.loading = false
                        })
                        .catch(function (error) {
                            me.loading = false
                        })
                }
            },
            computed: {
                dialogTitle () {
                    if (this.form.id){
                        return '编辑用户'
                    } else{
                        return '添加用户'
                    }
                }
            }
        });
    </script>
@endsection
